<template>
	<div class="public_content dashboard-editor-container">
		<div class="dataAnalysis" v-if="isShow">
			<div class="dataAnalysis-content">
				<h2>
					查看大屏数据
					<a class="fr pr-10 fcolor-white fsize-14" @click="closeHandle">关闭</a>
				</h2>
				<img src="~@/assets/img/daping.jpg" wdith="1000">
			</div>
		</div>
		<div class="sjzl">
			<div class="pop-title">
				<div class="title-text">数据总览</div>
				<div class="title-button">
					<a class="btn btn-default" @click="openHandle">查看大屏数据</a>
				</div>
			</div>
			<el-row :gutter="10">
				<el-col :span="4" >
					<div class="grid-content s1">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党支部数（个）</p>
							<p><span>14</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s2">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党小组（个）</p>
							<p><span>80</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s3">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党员总数（个）</p>
							<p><span>2000</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s4">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>视频资源总数（个）</p>
							<p><span>300</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s1">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党建新闻（个）</p>
							<p><span>1680</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s5 mg">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党建材料数（个）</p>
							<p><span>290</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s4">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>三会一课（次）</p>
							<p><span>390</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s5">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>视频学习时长（小时）</p>
							<p><span>2988</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s6">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>先锋榜样人数（人）</p>
							<p><span>40</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s3">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党建动态发布（条）</p>
							<p><span>680</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s7">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>活跃党员人数（人）</p>
							<p><span>68123</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content s6 mg">
						<div class="sjzl-text">
							<i class="el-icon-date"></i>
							<p>党建话题数（个）</p>
							<p><span>39866</span>
								<i class="el-icon-caret-top"></i>
							</p>
							<div class="clear"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!--党员分析-->
		<el-row :gutter="20">
		  <el-col :span="7">
		  	<div class="grid-content">
			  	<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员党龄结构</span>
					  </div>
					  <div  class="text item" style="height: 550px">
					    <img src="~@/assets/img/img-1.jpg" style="width:100%;"/>
					  </div>
					</el-card>
		 	 </div>
		  </el-col>
		  <el-col :span="10">
		  	<div class="grid-content">
		  		<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员数量分布</span>
					  </div>
					  <div  class="text item">
					  	<div id="map" style="height: 550px"></div>
					  </div>
					</el-card>
		  	</div>
		  </el-col>
		  <el-col :span="7">
		  	<div class="grid-content">
			  	<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员性别结构</span>
					  </div>
					  <div  class="text item" style="height: 550px">
					    <img src="~@/assets/img/img_05.jpg" style="width:100%;" />
					  </div>
					</el-card>
		 	 </div>
		  </el-col>
		</el-row>
	<!--党员情况-->
		<el-row :gutter="20" class="mt15">
		  <el-col :span="7">
		  	<div class="grid-content">
			  	<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员发展情况</span>
					    <div class="card-party">
								<i class="s1"></i>
								<span>转正</span>
								<i class="s2"></i>
								<span>预备</span>
							</div>
					  </div>
					  <div class="text item" style="height: 430px">
					    <img src="~@/assets/img/home_img1.png" style="width:100%;" />
					  </div>
					</el-card>
		 	 </div>
		  </el-col>
		  <el-col :span="10">
		  	<div class="grid-content">
		  		<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员入党时间分析</span>
					  </div>
					  <div  class="text item">
					  	<div id="container" style="height: 430px"></div>
					  </div>
					</el-card>
		  	</div>
		  </el-col>
		  <el-col :span="7">
		  	<div class="grid-content">
			  	<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党员入党时间分析</span>
					  </div>
					  <div  class="text item" style="height: 430px">
					    <img src="~@/assets/img/img_05.jpg" style="width:100%;" />
					  </div>
					</el-card>
		 	 </div>
		  </el-col>
		</el-row>
	<!--党费缴纳分析-->
		<el-row class="mt15">
		  <el-col :span="24">
		  	<div class="grid-content">
			  	<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span class="card-title">党费缴纳分析</span>
					  </div>
					  <div class="text item" style="height: 630px">
					  	<div class="df-z z">
								<div class="df-zs wz">
									<label><input type="radio" name="aaa" checked>单位党费缴纳分析
									</label>
									<label><input type="radio" name="aaa">支部党费缴纳分析
									</label>
									<select class="">
										<option value="">2018</option>
										<option value="">2017</option>
										<option value="">2016</option>
									</select>
								</div>
								<div class="df-zx">
									<img src="~@/assets/img/img_17.jpg" style="width:100%;" />
									<br />
									<p>党费缴纳完成进度</p>
								</div>
							</div>
							<div class="df-c z">
								<table id="contentTable">
									<thead class="tb-top">
										<tr>
											<th>排名</th>
											<th>单位名称</th>
											<th>党费缴纳金额</th>
										</tr>
									</thead>
									<tbody>
		
										<tr>
											<td>1</td>
											<td>第一大队</td>
											<td>40000</td>
										</tr>
										<tr>
											<td>1</td>
											<td>第二大队</td>
											<td>50000</td>
										</tr>
										<tr>
											<td>3</td>
											<td>第三大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>4</td>
											<td>第四大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>5</td>
											<td>第五大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>6</td>
											<td>第六大队</td>
											<td>15000</td>
										</tr>
										<tr>
											<td>7</td>
											<td>第七大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>8</td>
											<td>第八大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>9</td>
											<td>第九大队</td>
											<td>45000</td>
										</tr>
										<tr>
											<td>10</td>
											<td>第十大队</td>
											<td>20000</td>
										</tr>
										<tr>
											<td>11</td>
											<td>郑少高速大队</td>
											<td>24000</td>
										</tr>
										<tr>
											<td>12</td>
											<td>西南绕城高速大队</td>
											<td>10000</td>
										</tr>
										<tr>
											<td>13</td>
											<td>机动车辆管理所</td>
											<td>23000</td>
										</tr>
										<tr>
											<td>14</td>
											<td>检测中心</td>
											<td>11000</td>
										</tr>
										<tr>
											<td>15</td>
											<td>停车场管理中心</td>
											<td>242000</td>
										</tr>
										<tr>
											<td>16</td>
											<td>非机动车管理所</td>
											<td>26000</td>
										</tr>
										<tr>
											<td>17</td>
											<td>机关</td>
											<td>25000</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="df-y z" style="width:415px;">
									<div id="chajian2" style="height: 630px"></div>
							</div>
					  </div>
					</el-card>
		 	 </div>
		  </el-col>
		</el-row>
	</div>	
</template>

<script>
import echarts from 'echarts'
export default {
	name: 'dataOverview',
	data () {
		return {
			isShow:false,
			chartmap: null,
			chartcontainer: null,
			chartchajian2: null
		}
	},
	mounted() {
		this.mapData();
		this.containerData();
		this.chajian2Data();
	},
	methods: {
		openHandle(){
			this.isShow = true
		},
		closeHandle(){
			this.isShow = false
		},
		mapData(){
				var option = {
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    legend: {
			        data: ['党员数量分布']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01]
			    },
			    yAxis: {
			        type: 'category',
			        data: ['第一大队','第二大队','第三大队','第四大队','第五大队','第六大队','第七大队','第八大队','第九大队','第十大队','郑少高速大队','西南绕城高速大队','机动车辆管理所','检测中心','停车场管理中心','非机动车管理所','机关']
			    },
			    series: [
			        {
			            name: '党员数量分布',
			            type: 'bar',
			            data:[260, 52, 200, 334, 390, 330, 220, 334, 390, 330, 220, 130, 200, 220, 130, 200, 250]
			        }
			    ]
			};
			this.chartmap = echarts.init(document.getElementById('map'))
		  this.chartmap.setOption(option)
		  window.addEventListener('resize', () => {
		    this.chartmap.resize()
		  })
		},
		containerData(){
				var option = {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [0, 500, 650, 934, 860, 1129, 1320],
						type: 'line',
						areaStyle: {}
					}]
				};
			this.chartcontainer = echarts.init(document.getElementById('container'))
		this.chartcontainer.setOption(option)
		window.addEventListener('resize', () => {
		  this.chartcontainer.resize()
		})
		},
		chajian2Data(){
				var option = {
					title: {
						text: '党费缴纳分析',
						subtext: '纯属虚构'
					},
					tooltip: {
						trigger: 'axis'
					},
		
					calculable: true,
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '往期',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									areaStyle: {
										type: 'default'
									}
								}
							},
							data: [10, 12, 21, 54, 260, 830, 710]
						},
						{
							name: '预交',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									areaStyle: {
										type: 'default'
									}
								}
							},
							data: [30, 182, 434, 791, 390, 30, 10]
						},
						{
							name: '意向',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									areaStyle: {
										type: 'default'
									}
								}
							},
							data: [1320, 1132, 601, 234, 120, 90, 20]
						}
					]
				};
			this.chartchajian2 = echarts.init(document.getElementById('chajian2'))
			this.chartchajian2.setOption(option)
			window.addEventListener('resize', () => {
				this.chartchajian2.resize()
			})
		}
	}	
}
</script>

<style scoped>
	.public_content img{
		width: 100%;
	}
	.dashboard-editor-container {
		padding:15px;
	}
	.dataAnalysis{
		position: absolute;
		z-index: 99;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(102,102,102,0.5);
	}
	.dataAnalysis h2{ 
		height: 25px;
		line-height: 25px;
		padding-left: 10px;
		margin: 0;
		background-color: #3366cc;
		font-size: 16px;
		color: #fff;
	}	
	.dataAnalysis .dataAnalysis-content{
		position: absolute;
		width: 1000px;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 100;
	}
	#contentTable {
	    font-size: 14px;
	    text-align: center;
	    margin: 0 auto;
	    border-collapse: separate;
	    border-spacing: 0;
	    border:0;
	}
	
	#contentTable thead tr,#contentTable tbody tr {
	    height: 30px;
	    line-height: 32px;
	    /*background-color: pink;*/
	}
	#contentTable tr th:first-child,table tr td:first-child {
	    border-left:0;
	}
	#contentTable tr th:last-child,table tr td:last-child {
		
	    border-right:0;
	}
	#contentTable tr td:first-child,
	#contentTable tr td:nth-child(2),
	#contentTable tr td:nth-child(3),
	#contentTable tr td:last-child{
	    border-bottom: 1px solid #eaeaea;
	}
	table tr:last-child td:first-child,
	table tr:last-child td:nth-child(2),
	table tr:last-child td:nth-child(3),
	table tr:last-child td:last-child{
	    border-bottom:0;
	}
	#contentTable tr th {
	    background: #3aa7e6;
	    color: white;
	    text-align: center;
	    font-weight: normal;
	}
	#contentTable tr:first-child th:first-child {
	    border-top-left-radius: 4px;
	}
	
	#contentTable tr:first-child th:last-child {
	    border-top-right-radius: 4px;
	}
	#contentTable tr:last-child td:first-child {
	    border-bottom-left-radius: 4px;
	}
	
	#contentTable tr:last-child td:last-child {
	    border-bottom-right-radius: 4px;
	}
	.df-z {
	    width: 200px;
	}
	.z{
		float: left;
	}
	.df-zs {
		height: 100px;
		background-color: #f5f5f5;
		border-radius: 4px;
		border: solid #E0E0E0 1px;
		margin-bottom: 20px;
	}
	
	.df-zs label {
		width: 90%;
		margin: 2px auto;
		line-height: 30px;
		display: block;
		font-weight: normal;
		font-size: 14px;
	}
	
	.df-zs input {
		margin: auto 10px;
	}
	.df-zs select {
		border: 0;
		border-top: 1px solid #e4e4e4;
		padding: 2% 30%;
		color: #3aa7e6;
		background-color: rgba(0, 0, 0, 0);
		margin: 0 auto;
		display: block;
		width: 180px;
	}
	
	.df-zx {
		height: 280px;
	}
	
	.df-zx img {
		width: 100%;
	}
	
	.df-zx p {
		text-align: center;
	}
	
	.df-c {
		width: 450px;
		margin: 0px 30px;
	}
	.df-c table{width: 100%;}
	.mt15{
		margin-top:15px;
	}
	.card-party{
		float: right;
		display: flex;
	}
	.card-party i {
	    width: 10px;
	    height: 10px;
	    float: left;
	    display: block;
	    margin: 5px 10px;
	}
	.card-party .s1 {
	    background-color: #45abe5;
	}
	.card-party .s2 {
	    background-color: #3dcc8c;
	}
	.card-title{
		font-size: 16px;
	}
	.text {
	    font-size: 14px;
	  }
	
	  .item {
	    margin-bottom: 18px;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	    display: table;
	    content: "";
	  }
	  .clearfix:after {
	    clear: both
	  }
	
	  .box-card {
	    /*width: 480px;*/
	  }
	  .mod-home {
	    line-height: 1.5;
	  }
	  .sjzl {
			/*margin-bottom: 15px;*/
			/*padding:15px;*/
		}
	.pop-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	    margin-bottom: 10px;
	}
	.pop-title .title-text{
			font-size:16px;
	}
	.btn {
		display: inline-block;
		padding: 6px 12px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}
	.btn-default {
		color: #333;
		background-color: #fff;
		border-color: #ccc;
	}
	.btn-default:hover {
		color: #333;
		background-color: #e6e6e6;
		border-color: #adadad
	}
	.s1 {
		background-color: #45abe5;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s2 {
		background-color: #3dcc8c;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s3 {
		background-color: #ffb650;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s4 {
		background-color: #e56045;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s5 {
		background-color: #2e5599;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s6 {
		background-color: #ff5656;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	.s7 {
		background-color: #2f3841;
		margin-bottom:10px;
		height: 60px;
		padding: 5px;
	}
	
	.clear {
		clear: both;
	}
	.sjzl-text {
	    margin: 10px;
		height: 40px;
		width: 160px;
	}
	.sjzl .el-icon-date {
		float: left;
		width: 30px;
		height: 30px;
		margin: 5px;
		font-size: 30px;
		color: #fff;
	}
	.sjzl p {
		float: left;
		width: 120px;
		margin-top: 3px;
		font-size: 12px;
		color: #fff;
		text-align: right;
	}
	.el-icon-caret-top{
		color: #ff0000;
	}
</style>
